<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>用户管理</title>
  <!-- <link rel="stylesheet" href="layui2/src/css/layui.css" media="all"> -->
 <!-- <script src="layui2/src/layui.js"></script> -->
 <script src="js/jquery-3.3.1.min.js"></script>
 <link rel="stylesheet" href="layui/css/layui.css" media="all">
 <script src="layui/layui.js" charset="utf-8"></script>
</head>
<style>
	  .content2{
	    border-color: red;
	    outline: 0;
	    -webkit-box-shadow: inset 0 1px 1px  red,0 0 8px  yellow;
	    box-shadow: inset 0 1px 1px  red,0 0 8px  yellow;
	}
</style>
<body>
	<div style="margin-top: 3%;margin-left: 2%;margin-right: 3%;">
<table class="layui-hide" lay-id="demo2" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container layui-inline">
	<button class="layui-btn layui-btn-danger" lay-event="deleteSome"><i class="layui-icon"></i>删除</button>
	<button class="layui-btn " onclick="add()"><i class="layui-icon"></i>添加</button>
	<input type="button" value="&#xe642;编辑" class="layui-btn layui-icon" id="bn"  />&nbsp;&nbsp;
	
    <span class="layui-btn layui-btn-sm" lay-event="getChecked">获得选中的数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="getCheckedStatus">获得选中的状态</span>
    {{# if(d.checkStatus) {}}
   
    {{# } }}
    {{# if(d.id === 'demo'){ }}
 
    {{# } }}
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload">重载</span>
  </div>
  <div class="layui-inline">
    {{# if(d.id === 'demo'){ }}
    
    {{# } else {}}
  
    {{# } }}
  </div>

</script>



	</div>
	<script>
		 $(document).ready(function(){
			 
		  $("#bn").click(function(){
	    	alert("df")
	  })
		// alert("aa")
		 })
		 
		// function btn(){
		// 	$("tr").getAttribute("data-edit")
		// 	alert("df")
		// }
	  var data_json="";
		
		     
		$.post("http://localhost:86/HBuilder/xops/Back.php",
		{
				 	 type:"User",
				 	 operation:"search",
					 curr:1,
					 nums:10,
				 	 token:"1ab66e59325257b60b971d4afa1505ce"
				 },function(data,status){
				 	// alert("data:"+(data));
				 	data_json=JSON.parse(data);
				 data_json=data_json["data"];
			
				 })
	  layui.use(['jquery','layer','table',''], function () {
	    var $ = layui.jquery
	      , layer = layui.layer //弹层
	      // , form = layui.form //弹层
	      , table = layui.table //表格
	      // , tablePlug = layui.tablePlug; //表格插件
	
	    // 当前这个测试页面测试的重点不是智能重载，所以关掉该功能，实际上该功能也是默认关闭的，可以不执行下面这句代码，也可以强制指定。
	    // tablePlug.smartReload.enable(false);
	
	    // 处理操作列
	    // var fn1 = function (field) {
	    //   return function (data) {
	    //     return data[field];
	    //   };
	    // };
	   
	   
	   
	    table.render({
	      // elem: '#demo2'
	      elem: '[lay-id="demo2"]'
	      // , height: 'full-200'
	      // , url: 'json/data11.json' //数据接口
	      , data: data_json
		
	      , title: '用户表'
	      , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
								layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', "refresh"] //自定义分页布局
									,
								curr: 1 //设定初始在第 5 页
									,
								groups: 5 //只显示 1 个连续页码
									,
								first: true //不显示首页
									,
								last: true //不显示尾页
		
							}
	      // , page: false
	      , limit: 10
				,loading:true
				, limits: [10, 20, 40,80]
	      , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
	      // , totalRow: true //开启合计行
	      , cellMinWidth: 90
	      // , autoSort: false // 不进行前端排序
	      , done: function (res, curr, count) {
			  // data[11]['id']="ff";
	        var tableView = this.elem.next();
	        var totalRow = tableView.find('.layui-table-total');
	        var limit = this.page ? this.page.limit : this.limit;
	        layui.each(totalRow.find('td'), function (index, tdElem) {
	          tdElem = $(tdElem);
	          var text = tdElem.text();
	          if (text && !isNaN(text)) {
	            text = (parseFloat(text) / limit).toFixed(2);
	            tdElem.find('div.layui-table-cell').html(text);
	          }
	        });
						  console.log("res:",res);
					
					//得到当前页码
					console.log("curr",curr); 
					
					//得到数据总量
					console.log("co",count);
			
					
	      },
				parseData: function (ret) {
				  return {
				    code: ret.code,
				    // msg: ret.msg,
				    count: ret.count,
				    data: ret.data 
				  }
				}
	      // 定制当前数据的主键字段，默认为id，
	      , primaryKey: 'id'
	      // 是否开启复选列状态记录 支持true/false/{} true的情况下primaryKey默认为id，default默认为[]
	      // primaryKey: 'username', // 可以定义成其他的字段，但是有一个要求，就是这个字段的值必须有唯一性约束，这个是一个判断记录是否相同重要的条件
	      , checkStatus: {
	        // 原始已经选中的记录的主键值集合
	        default: []
	      }
	      , checkDisabled: {
	        enabled: true,
	        data: []
	      }
	      ,					cols: [
								[
									{
											type: 'numbers',
										fixed: 'left',
											title: '序号',
											minWidth:"5%"
											// LAY_CHECKED: true
										},
										{
										type: 'checkbox',
										id: "ee",
										fixed: 'left',
											minWidth:"5%"
										// LAY_CHECKED: true
									}, {
										field: 'id',
										title: 'ID',
										width: 80,
										fixed: 'left',
										unresize: true,
										sort: true,
																
										fixed: 'left',
											minWidth:"10%"
											// minWidth: 500,
										// event:'ddd',
										
									}, {
										field: 'account',
										title: '用户名',
										minWidth: 120,
										width:'15%',
										edit: 'text',
										fixed: 'left',	
										minWidth:"10%",
										id:"dddd"
								
									}
							
									, {
										field: 'password',
										title: '密码',
										minWidth: 120,
										width:'15%',
										edit: 'text',
										fixed: 'center',
										
										sort: true,
											minWidth:"12%"
									}
									, {
										field: 'tel',
										title: '电话',
										width: '15%',
										minWidth:120,
										edit: 'text',
										fixed: 'right',
										sort: true,
										minWidth:"10%"
									}, {
										field: 'datetime',
										title: '注册时间',
										
										// width:'15%',
										// edit: 'text',
										fixed: 'right',
									    minWidth:120,
										sort: true,
										
										}
									// }, {
	        //     fixed: 'right',
	        //     type: 'toolbar',
	        //     field: 'toolbar_common',
	        //     title: '操作1',
	        //     width: 190,
	        //     align: 'right',
	        //     // toolbar: '#barDemo',
	        //     // rowspan: 2
	        //   }
									
							
	        ]
	      ]
	    });
	     
	    $(document).on('click', '.layui-table-view .layui-table-body tr', function (event) {
	      var trElem = $(this);
	      var tableView = trElem.closest('.layui-table-view');
	      tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
	      tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
	    })
	       
	  });
		
		 function add(){
			  layer.open({
			   type: 2,
			   title: '添加用户数据',
			   shadeClose: true,
			   shade: false,
			   maxmin: true, //开启最大化最小化按钮
			   area: ['600px', '400px'],
			   content: 'html/member-add.html'
			 });
		 }
	</script>
</body>
</html>
